<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryForm"
        :label-width="$i18n.locale === 'en' ? '120px' : '100px'"
      >
        <el-form-item :label="dataList.DeviceBorrowNumber" prop="num">
          <el-input
            v-model="queryForm.num"
            :placeholder="dataList.DeviceBorrowNumber"
          />
        </el-form-item>
        <el-form-item :label="dataList.Device" prop="deviceName">
          <el-input
            v-model="queryForm.deviceName"
            :placeholder="dataList.EnterDevice"
          />
        </el-form-item>
        <el-form-item :label="dataList.ApplicationType" prop="type">
          <DicDropDownList
            v-model="queryForm.type"
            :dict-code="'deviceStatusList'"
            :display-text="displayText"
            :is-all="true"
          />
        </el-form-item>
        <el-form-item :label="dataList.Status" prop="statusId">
          <el-select
            v-model="queryForm.statusId"
            :placeholder="dataList.Placeholder"
            style="width: 94%"
          >
            <el-option
              v-for="item in optionsState"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="dataList.Applicant" prop="creatorName">
          <el-input
            v-model="queryForm.creatorName"
            :placeholder="dataList.Applicant"
          />
        </el-form-item>
        <el-form-item :label="dataList.ApplicationTime" prop="createTime">
          <el-date-picker
            v-model="queryForm.createTime"
            type="daterange"
            :range-separator="dataList.To"
            :start-placeholder="dataList.StartDate"
            :end-placeholder="dataList.EndDate"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="base-content-operate">
        <el-button type="primary" @click="onQuery">{{ btn.Query }}</el-button>
        <el-button @click="cancelForm">{{ btn.Reset }}</el-button>
        <el-button icon="el-icon-plus" type="primary" @click="onNew">{{
          btn.Add
        }}</el-button>
      </div>

      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column :label="dataList.DeviceBorrowNumber">
          <template slot-scope="scope">
            <el-link type="primary" @click="toView(scope.row)">
              {{ scope.row.num }}</el-link
            >
          </template>
        </el-table-column>
        <el-table-column :label="dataList.ApplicationType">
          <template slot-scope="scope">
            {{ scope.row.typeName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.deviceNum }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.deviceName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSupplierName">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Applicant">
          <template slot-scope="scope">
            {{ scope.row.creatorName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.ApplicationTime">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Status">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Operation">
          <template slot-scope="scope">
            <div
              v-if="scope.row.statusId == 10 || scope.row.statusId == 40"
              class="base-table-operation"
            >
              <el-link
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >{{ btn.Edit }}</el-link
              >
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >{{ btn.Nullify }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>

    <DeviceChangeAddDialog
      v-if="dialogFormVisible"
      ref="DeviceChangeAddDialog"
      :dialog-form-visible.sync="dialogFormVisible"
    />

    <DeviceChangeEditDialog
      v-if="dialogFormEditVisible"
      :id.sync="id"
      ref="DeviceChangeEditDialog"
      :dialog-form-visible.sync="dialogFormEditVisible"
    />

    <DeviceChangeViewDialog
      v-if="dialogFormViewVisible"
      :id.sync="id"
      ref="DeviceChangeViewDialog"
      :dialog-form-visible.sync="dialogFormViewVisible"
    />
  </div>
</template>

<script>
import { getList, scrapDeviceChange } from "../../api/DeviceChange.js";
import DeviceChangeAddDialog from "./DeviceChangeAddDialog.vue";
import DeviceChangeEditDialog from "./DeviceChangeEditDialog.vue";
import DeviceChangeViewDialog from "./DeviceChangeViewDialog.vue";
import { changeStatus } from "../../utils/const";
import { formatTimeMin, formatTimeMax } from "../../utils/time";
import DicDropDownList from "../../components/DicDropDownList.vue";

export default {
  name: "DeviceChangeList",
  components: {
    DeviceChangeAddDialog,
    DeviceChangeEditDialog,
    DeviceChangeViewDialog,
    DicDropDownList,
  },
  data() {
    return {
      displayText: [
       this.$t("ModuleDevice.Device.Deactivate"),
         this.$t("ModuleDevice.Device.Downgrading"),
         this.$t("ModuleDevice.Device.Scrap"),
         this.$t("ModuleDevice.Device.Normal"),
         this.$t("ModuleDevice.Device.Fault"),
      ],

      id: 0,
      loading: true,
      list: [],
      options: [],
      optionsState: changeStatus,
      queryForm: {
        createTime: [],
        num: "",
        deviceName: "",
        type: "-1",
        statusId: -1,
        creatorName: "",
        creatorId: [],
        stateTime: null,
        endTime: null,
        departId: sessionStorage.getItem("currentDepartmentId"),
      },
      dialogFormVisible: false,
      dialogFormViewVisible: false,
      dialogFormEditVisible: false,
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.getList();
  },
  methods: {
    toView(row) {
      this.id = row.id;
      this.dialogFormViewVisible = true;
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.queryForm.stateTime = null;
      this.queryForm.endTime = null;
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;

      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    onNew() {
      this.dialogFormVisible = true;
    },
    handleDelete(rowData) {
      this.$confirm(
        this.$i18n.t("ModuleDevice.Message.VoidOperateTip"),
        this.$t("ModuleDevice.buttons.Tips"),
        {
          confirmButtonText: this.$t("ModuleDevice.buttons.Confirm"),
          cancelButtonText: this.$t("ModuleDevice.buttons.Cancel"),
          type: "warning",
          center: true,
        }
      )
        .then(() => {
          scrapDeviceChange({ id: rowData.id })
            .then((res) => {
              this.getList();
            })
            .catch((res) => {});
        })
        .catch((action) => {});
    },
    handleEdit(rowData) {
      this.id = rowData.id;
      this.dialogFormEditVisible = true;
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.queryForm.stateTime = formatTimeMin(
        this.queryForm.createTime[0] ? this.queryForm.createTime[0] : null
      );
      this.queryForm.endTime = formatTimeMax(
        this.queryForm.createTime[1] ? this.queryForm.createTime[1] : null
      );
      this.getList();
    },
  },
};
</script>
